<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>算法管理</title>
    <link rel="stylesheet" href="../css/element-ui/index.css">
    <link rel="stylesheet" href="../css/element-ui/element-ui.css">
    <link rel="stylesheet" href="../css/index.css"/>
    <link rel="stylesheet" href="../css/common.css"/>
    </meta>
</head>
<body>
<div id="aglorithManage">
    <el-container style="border: 1px;padding: 0 0 5px 0px;">
        <el-header>
            <el-row>
                <el-col :span="2">
                    <el-button name="stringRule" type="text" v-bind:style="{color:stringRuleColor}"
                               v-on:click="clickStringRule" class="headRule">字符遮盖
                    </el-button>
                </el-col>
                <el-col :span="2">
                    <el-button name="keyWord" type="text" v-bind:style="{color:KeywordColor}" v-on:click="clickKeyWord"
                               class="headRule">关键字替换
                    </el-button>
                </el-col>
                <el-col :span="2">
                    <el-button name="generalRule" type="text" v-bind:style="{color:generalColor}"
                               v-on:click="clickGeneralRule" class="headRule">泛化脱敏
                    </el-button>
                </el-col>
                <el-col :span="2">
                    <el-button name="changeRule" type="text" v-bind:style="{color:changeRuleColor}"
                               v-on:click="clickchangeRule" class="headRule">变换脱敏
                    </el-button>
                </el-col>
            </el-row>
        </el-header>
        <el-main>
            <el-row>
                <div class="bd2 flex-col" v-if="stringRule">
                    <el-col>
                        <div class="layer4 flex-col"><span class="word11">保留前n后m</span></div>
                    </el-col>
                    <el-col>
                        <div class="layer5 flex-col">
                            <div class="group5 flex-row">
                                <span class="word12">n:</span>
                                <div class="mod4 flex-col">
                                    <!--      <span class="word13">请输入内容</span>-->
                                    <el-input v-model="stringRuleModel.remainBeforeEnd.n" style="width:33vh" placeholder="请输入内容"
                                              clearable></el-input>
                                </div>
                                <span class="word14">m:</span>
                                <div class="mod5 flex-col">
                                    <!--                                    <span class="word15">请输入内容</span>-->
                                    <el-input v-model="stringRuleModel.remainBeforeEnd.m" style="width:33vh" placeholder="请输入内容"
                                              clearable></el-input>
                                </div>
                                <div class="mod6 flex-col">
                                    <!--                                    <span class="word16">保存参数</span>-->
                                    <el-button type="primary"
                                               style="text-align:center;width: 88px;height: 32px;border: 1px solid rgba(45, 90, 250, 1);background-color: rgba(234, 238, 254, 1);"
                                               plain>保存参数
                                    </el-button>
                                </div>
                            </div>
                        </div>
                    </el-col>
                    <el-col>
                        <div class="layer6 flex-col"><span class="info2">保留x至y</span></div>
                    </el-col>
                    <el-col>
                        <div class="layer7 flex-col">
                            <div class="block2 flex-row">
                                <span class="word17">x:</span>
                                <div class="wrap1 flex-col">
                                    <!--                                    <span class="txt7">请输入内容</span>-->
                                    <el-input v-model="stringRuleModel.remainFromTo.x" style="width:33vh" placeholder="请输入内容"
                                              clearable></el-input>
                                </div>
                                <span class="info3">y:</span>
                                <div class="wrap2 flex-col">
                                    <!--                                    <span class="info4">请输入内容</span>-->
                                    <el-input v-model="stringRuleModel.remainFromTo.y" style="width:33vh" placeholder="请输入内容"
                                              clearable></el-input>
                                </div>
                                <div class="wrap3 flex-col">
                                    <!--                                    <span class="word18">保存参数</span>-->
                                    <el-button type="primary"
                                               style="text-align:center;width: 88px;height: 32px;border: 1px solid rgba(45, 90, 250, 1);background-color: rgba(234, 238, 254, 1);"
                                               plain>保存参数
                                    </el-button>
                                </div>
                            </div>
                        </div>
                    </el-col>

                    <el-col>
                        <div class="layer4 flex-col"><span class="word11">遮盖前n后m</span></div>
                    </el-col>
                    <el-col>
                        <div class="layer5 flex-col">
                            <div class="group5 flex-row">
                                <span class="word12">n:</span>
                                <div class="mod4 flex-col">
                                    <!--      <span class="word13">请输入内容</span>-->
                                    <el-input v-model="stringRuleModel.coverBeforeEnd.n" style="width:33vh" placeholder="请输入内容"
                                              clearable></el-input>
                                </div>
                                <span class="word14">m:</span>
                                <div class="mod5 flex-col">
                                    <!--                                    <span class="word15">请输入内容</span>-->
                                    <el-input v-model="stringRuleModel.coverBeforeEnd.m" style="width:33vh" placeholder="请输入内容"
                                              clearable></el-input>
                                </div>
                                <div class="mod6 flex-col">
                                    <!--                                    <span class="word16">保存参数</span>-->
                                    <el-button type="primary"
                                               style="text-align:center;width: 88px;height: 32px;border: 1px solid rgba(45, 90, 250, 1);background-color: rgba(234, 238, 254, 1);"
                                               plain>保存参数
                                    </el-button>
                                </div>
                            </div>
                        </div>
                    </el-col>

                    <el-col>
                        <div class="layer6 flex-col"><span class="info2">遮盖自x至y</span></div>
                    </el-col>
                    <el-col>
                        <div class="layer7 flex-col">
                            <div class="block2 flex-row">
                                <span class="word17">x:</span>
                                <div class="wrap1 flex-col">
                                    <!--                                    <span class="txt7">请输入内容</span>-->
                                    <el-input v-model="stringRuleModel.coverFromTo.x" style="width:33vh" placeholder="请输入内容"
                                              clearable></el-input>
                                </div>
                                <span class="info3">y:</span>
                                <div class="wrap2 flex-col">
                                    <!--                                    <span class="info4">请输入内容</span>-->
                                    <el-input v-model="stringRuleModel.coverFromTo.y" style="width:33vh" placeholder="请输入内容"
                                              clearable></el-input>
                                </div>
                                <div class="wrap3 flex-col">
                                    <!--                                    <span class="word18">保存参数</span>-->
                                    <el-button type="primary"
                                               style="text-align:center;width: 88px;height: 32px;border: 1px solid rgba(45, 90, 250, 1);background-color: rgba(234, 238, 254, 1);"
                                               plain>保存参数
                                    </el-button>
                                </div>
                            </div>
                        </div>
                    </el-col>

                    <el-col>
                        <div class="layer8 flex-col">
                            <span class="word19">特殊字符前遮盖（首次出现该字符）</span>
                        </div>
                    </el-col>
                    <el-col>
                        <template>
                            <el-radio-group v-model="stringRuleModel.beforeChar">
                                <div class="layer9 flex-col">
                                    <div class="main2 flex-row">
                                        <!--                                        <div class="ImageText1 flex-row justify-between">-->
                                        <!--                                        <span class="word20">&#64;</span>-->
                                        <el-radio :label="1" class="word20">&#64;</el-radio>
                                        <!--                                        </div>-->
                                        <!--                                <span class="info5">&amp;</span>-->
                                        <el-radio :label="2" class="word20 radio">&amp;</el-radio>
                                        <!--                                        <div class="ImageText2 flex-row justify-between">-->
                                        <!--                                        <span class="word21">%</span>-->
                                        <el-radio :label="3" class="word20 radio">.</el-radio>
                                        <div class="box11 flex-col">
                                            <el-button type="primary" v-on:click="saveBeforeChar(1)"
                                                       style="text-align:center;width: 88px;height: 32px;border: 1px solid rgba(45, 90, 250, 1);background-color: rgba(234, 238, 254, 1);"
                                                       plain>保存参数
                                            </el-button>
                                        </div>
                                    </div>
                                </div>
                            </el-radio-group>
                        </template>
                    </el-col>

                    <el-col>
                        <div class="layer8 flex-col">
                            <span class="word19">特殊字符后遮盖（首次出现该字符）</span>
                        </div>
                    </el-col>
                    <el-col>
                        <template>
                            <el-radio-group v-model="stringRuleModel.afterChar">
                                <div class="layer9 flex-col">
                                    <div class="main2 flex-row">
                                        <!--                                        <div class="ImageText1 flex-row justify-between">-->
                                        <!--                                        <span class="word20">&#64;</span>-->
                                        <el-radio :label="1" class="word20">&#64;</el-radio>
                                        <!--                                        </div>-->
                                        <!--                                <span class="info5">&amp;</span>-->
                                        <el-radio :label="2" class="word20 radio">&amp;</el-radio>
                                        <!--                                        <div class="ImageText2 flex-row justify-between">-->
                                        <!--                                        <span class="word21">%</span>-->
                                        <el-radio :label="3" class="word20 radio">.</el-radio>
                                        <div class="box11 flex-col">
                                            <el-button type="primary"
                                                       style="text-align:center;width: 88px;height: 32px;border: 1px solid rgba(45, 90, 250, 1);background-color: rgba(234, 238, 254, 1);"
                                                       plain>保存参数
                                            </el-button>
                                        </div>
                                    </div>
                                </div>
                            </el-radio-group>
                        </template>
                    </el-col>
                </div>
            </el-row>
            <el-row>
                <div class="bd2 flex-col" v-if="Keyword">
                    <el-col>
                        <div class="layer4 flex-col">
                            <span class="word11">字符串替换</span>
                        </div>
                    </el-col>
                    <el-col>
                        <div class="layer5 flex-col">
                            <div class="group5 flex-row">
                                <span class="word98">关键字:</span>
                                <div class="mod4 flex-col">
                                    <el-input v-model="keyWord" style="width:33vh" placeholder="请输入内容"
                                              clearable></el-input>
                                </div>
                                <span class="word98">替换字符串:</span>
                                <div class="mod5 flex-col">
                                    <el-input v-model="replaceWord" style="width:33vh" placeholder="请输入内容"
                                              clearable></el-input>
                                </div>
                                <div class="mod98 flex-col">
                                    <el-button type="primary"
                                               style="text-align:center;width: 88px;height: 32px;border: 1px solid rgba(45, 90, 250, 1);background-color: rgba(234, 238, 254, 1);"
                                               plain>保存参数
                                    </el-button>
                                </div>
                            </div>
                        </div>
                    </el-col>

                    <el-col>
                        <div class="layer10 flex-col">
                            <span class="txt8">身份证随机替换</span>
                        </div>
                    </el-col>
                    <el-col>
                        <div class="layer11 flex-col">
                            <div class="box12 flex-row">
                                <span class="word22">替换区间:</span>
                                <div class="flex-col">
                                    <div class="main3 flex-row">
                                        <div class="ImageText3 flex-row justify-between">
                                            <el-date-picker
                                                    v-model="dateRange"
                                                    type="daterange"
                                                    range-separator="至"
                                                    start-placeholder="开始日期"
                                                    end-placeholder="结束日期">
                                            </el-date-picker>
                                            <!--                                            <div class="main4 flex-col"></div>-->
                                        </div>
                                    </div>
                                </div>
                                <div class="mod98 flex-col" style="margin-left: 144vh">
                                    <el-button type="primary"
                                               style="text-align:center;width: 88px;height: 32px;border: 1px solid rgba(45, 90, 250, 1);background-color: rgba(234, 238, 254, 1);"
                                               plain>保存参数
                                    </el-button>
                                </div>
                            </div>
                        </div>
                    </el-col>
                    <el-col>
                        <div class="layer12 flex-col"><span class="txt9">字符位移</span></div>
                    </el-col>
                    <el-col>
                        <div class="layer13 flex-col">
                            <div class="outer4 flex-row">
                                <span class="txt10">位移方式</span>
                                <div class="mod9 flex-col">
                                    <div class="section14 flex-row">
                                        <div class="ImageText4 flex-row">
                                            <div class="TextGroup4 flex-row justify-between">
                                                <span class="info10">请选择方式</span>
                                                <span class="txt11">请输入循环位移Bit数</span>
                                            </div>
                                            <div class="layer14 flex-col"></div>
                                        </div>
                                        <div class="layer15 flex-col"></div>
                                    </div>
                                </div>
                                <div class="mod98 flex-col" style="margin-left: 121vh">
                                    <el-button type="primary"
                                               style="text-align:center;width: 88px;height: 32px;border: 1px solid rgba(45, 90, 250, 1);background-color: rgba(234, 238, 254, 1);"
                                               plain>保存参数
                                    </el-button>
                                </div>
                            </div>
                        </div>
                    </el-col>
                </div>
            </el-row>
            <el-row>
                <div class="bd2 flex-col" v-if="generalRule">
                    <el-col>
                        <div class="layer4 flex-col">
                            <span class="word11">日期泛化</span>
                        </div>
                    </el-col>

                    <el-col>
                        <template>
                            <el-radio-group v-model="radio">
                                <div class="layer9 flex-col">
                                    <div class="main2 flex-row">
                                        <!--                                        <div class="ImageText1 flex-row justify-between">-->
                                        <!--                                        <span class="word20">&#64;</span>-->
                                        <el-radio :label="1" class="word20">年</el-radio>
                                        <!--                                        </div>-->
                                        <!--                                <span class="info5">&amp;</span>-->
                                        <el-radio :label="2" class="word20 radio">月</el-radio>
                                        <!--                                        <div class="ImageText2 flex-row justify-between">-->
                                        <!--                                        <span class="word21">%</span>-->
                                        <el-radio :label="3" class="word20 radio">日</el-radio>
                                        <div class="box11 flex-col">
                                            <el-button type="primary"
                                                       style="text-align:center;width: 88px;height: 32px;border: 1px solid rgba(45, 90, 250, 1);background-color: rgba(234, 238, 254, 1);"
                                                       plain>保存参数
                                            </el-button>
                                        </div>
                                    </div>
                                </div>
                            </el-radio-group>
                        </template>
                    </el-col>

                    <el-col>
                        <div class="layer10 flex-col">
                            <span class="txt8">地址泛化</span>
                        </div>
                    </el-col>
                    <el-col>
                        <template>
                            <el-radio-group v-model="radio">
                                <div class="layer9 flex-col">
                                    <div class="main2 flex-row">
                                        <!--                                        <div class="ImageText1 flex-row justify-between">-->
                                        <!--                                        <span class="word20">&#64;</span>-->
                                        <el-radio :label="1" class="word20">省</el-radio>
                                        <!--                                        </div>-->
                                        <!--                                <span class="info5">&amp;</span>-->
                                        <el-radio :label="2" class="word20 radio">市</el-radio>
                                        <!--                                        <div class="ImageText2 flex-row justify-between">-->
                                        <!--                                        <span class="word21">%</span>-->
                                        <el-radio :label="3" class="word20 radio">区</el-radio>
                                        <el-radio :label="4" class="word20 radio">县</el-radio>
                                        <div class="box11 flex-col" style="margin-left: 148vh">
                                            <el-button type="primary"
                                                       style="text-align:center;width: 88px;height: 32px;border: 1px solid rgba(45, 90, 250, 1);background-color: rgba(234, 238, 254, 1);"
                                                       plain>保存参数
                                            </el-button>
                                        </div>
                                    </div>
                                </div>
                            </el-radio-group>
                        </template>
                    </el-col>
                </div>
            </el-row>
            <el-row>
                <div class="bd2 flex-col" v-if="changeRule">
                    <el-col>
                        <div class="layer4 flex-col"><span class="word11">数字取整</span></div>
                    </el-col>
                    <el-col>
                        <div class="layer5 flex-col">
                            <div class="group5 flex-row">
                                <span class="word199">保留小数点前n位：</span>
                                <div class="mod4 flex-col">
                                    <!--      <span class="word13">请输入内容</span>-->
                                    <el-input v-model="n" style="width:33vh" placeholder="请输入内容"
                                              clearable></el-input>
                                </div>
                                <div class="mod6 flex-col" style="margin-left: 130vh">
                                    <!--                                    <span class="word16">保存参数</span>-->
                                    <el-button type="primary"
                                               style="text-align:center;width: 88px;height: 32px;border: 1px solid rgba(45, 90, 250, 1);background-color: rgba(234, 238, 254, 1);"
                                               plain>保存参数
                                    </el-button>
                                </div>
                            </div>
                        </div>
                    </el-col>

                    <el-col>
                        <div class="layer4 flex-col"><span class="word11">字符位移</span></div>
                    </el-col>
                    <el-col>
                        <div class="layer5 flex-col">
                            <div class="group5 flex-row">
                                <span class="word12" style="width:15vh;">位移方式：</span>
                                <div class="mod4 flex-col">
                                    <template>
                                        <el-select v-model="moveWays" placeholder="请选择">
                                            <el-option
                                                    v-for="item in options"
                                                    :key="item.value"
                                                    :label="item.label"
                                                    :value="item.value">
                                            </el-option>
                                        </el-select>
                                    </template>
                                    <!--      <span class="word13">请输入内容</span>-->
                                </div>
                                <div class="mod4 flex-col">
                                <el-input v-model="n" style="width:33vh" placeholder="请输入循环位移数"
                                          clearable></el-input>
                                </div>
                                <div class="mod6 flex-col" style="margin-left: 100vh">
                                    <el-button type="primary"
                                               style="text-align:center;width: 88px;height: 32px;border: 1px solid rgba(45, 90, 250, 1);background-color: rgba(234, 238, 254, 1);"
                                               plain>保存参数
                                    </el-button>
                                </div>
                            </div>
                        </div>
                    </el-col>
                </div>
            </el-row>
        </el-main>
    </el-container>
</div>
</div>
<script src="../js/vue/vue.js"></script>
<script src="../js/element-ui/index.js"></script>
<script src="algorithmManager.js"></script>
</body>
</html>